<template>
  <a-card class="content" :style="{ justifyContent: dataList.length < 4 ? 'center' : '' }">
    <div>
      <div class="content-box">
        <div class="content-item" v-for="(item, index) in dataList" :key="index">
          <img style="width: 100%; height: 100%; border-radius: 10px" :src="item.pictureUrl" />
          <div class="bottom">
            <div class="bottom-price-flex">
              <div class="bottom-price-flex-item" @click="goBuy(item.id, item.leasePrice, '2', item.appletType)">
                <div class="price-border-left">
                  <div class="price-border-title">按年租赁</div>
                  <div class="price-border-price">
                    <span style="font-size: 9px; margin-right: 6px">￥</span>
                    <span>{{ item.leasePrice }}</span>
                  </div>
                </div>
                <div class="buy-left">立即购买</div>
              </div>
              <div
                class="bottom-price-flex-item"
                style="margin-left: 24px"
                @click="goBuy(item.id, item.buyPrice, '1', item.appletType)"
              >
                <div class="price-border-right">
                  <div class="price-border-title">买断价格</div>
                  <div class="price-border-price">
                    <span style="font-size: 9px; margin-right: 6px">￥</span>
                    <span>{{ item.buyPrice }}</span>
                  </div>
                </div>
                <div class="buy-right">立即购买</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { ACCOUNT_BOOK, USER_INFO } from '@/store/mutation-types'
import Vue from 'vue'
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'buyShop',
  data() {
    return {
      dataList: [],
      ruleForm: {},
      showRenewBtn: false, // 判断租赁是否到期
      maiduanPrice: 0, // 小程序商城买断价格
    }
  },
  created() {
    this.getModulePrice()
    this.getBookDetail()
  },
  methods: {
    // 获取账套详情
    getBookDetail() {
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountId = accountBook && accountBook.id
      getAction('/accountbookinfo/xghAccountBook/queryById', { id: accountId }).then((res) => {
        if (res.success) {
          this.ruleForm = res.result
          if (this.ruleForm.appletOfUse && this.ruleForm.appletBuyType == 2) {
            // 租赁，需要判断时间
            this.getAppletInfo()
          } else if (this.ruleForm.appletOfUse && this.ruleForm.appletBuyType == 1 && this.ruleForm.appletType == 10) {
            // 小程序买断，需要获取价格，补差价
            this.getPriceInfo()
          }
        }
      })
    },
    // 判断租赁是否到期
    getAppletInfo() {
      let userInfo = Vue.ls.get(USER_INFO)
      getAction('/xghRequestForm/xghRequestForm/getAppletInfo', {
        accountBookId: this.ruleForm.id,
        phone: userInfo.username,
        appletOfUse: this.ruleForm.appletOfUse,
      }).then((res) => {
        if (res.success) {
          if (res.result.renew <= 3) {
            this.showRenewBtn = true
          } else {
            this.showRenewBtn = false
          }
        }
      })
    },
    // 获取小程序商城买断价格
    getPriceInfo() {
      getAction('/XghAuthorizationCenter/xghAuthorizationCenterOrders/queryAppletByAccountBookId', {
        xghAccountBookId: this.ruleForm.id,
      }).then((res) => {
        if (res.success) {
          if (res.result && res.result.xghAuthorizationCenterOrders) {
            this.maiduanPrice = res.result.xghAuthorizationCenterOrders.orderMoney
          }
        }
      })
    },
    // 获取购买商城模块的价格设置
    getModulePrice() {
      getAction('/xghModulePrice/xghModulePrice/list', {
        moduleNumber: 'GMSC',
      }).then((res) => {
        if (res.success && res.result && res.result.length > 0) {
          this.dataList = res.result[0].modulePriceInfos
        }
      })
    },
    /**
     *
     * @param price 价格
     * @param buyType 购买类型 1-买断 2-租赁
     * @param goodsType 商品类型 10-小程序商城 11-分销商城
     */
    async goBuy(goodsId, price, buyType, goodsType) {
      let orderMoney = price
      if (this.ruleForm.appletOfUse && this.ruleForm.appletBuyType == 1 && this.ruleForm.appletType == 11) {
        // 分销商城买断，都不能再买了
        return this.$elMessage.error('分销商城买断暂不支持续费')
      } else if (this.ruleForm.appletOfUse && this.ruleForm.appletBuyType == 1 && this.ruleForm.appletType == 10) {
        // 小程序商城买断，只能买分销商城买断
        if (!(buyType == 1 && goodsType == 11)) {
          return this.$elMessage.error('小程序商城买断只能升级分销商城买断')
        } else {
          // 计算差价
          orderMoney = price - this.maiduanPrice
          if (orderMoney <= 0) {
            orderMoney = 0.01
          }
          console.log('orderMoney', orderMoney)
        }
      } else if (this.ruleForm.appletOfUse && this.ruleForm.appletBuyType == 2 && !this.showRenewBtn) {
        // 租赁，需要判断时间
        return this.$elMessage.error('请到期后再购买！')
      }
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountId = accountBook && accountBook.id
      let params = {
        goodsId,
        goodsName: goodsType == 10 ? '小程序商城' : '分销商城',
        goodsNumber: 1,
        goodsType,
        orderMoney,
        xghAccountBookId: accountId,
        buyType,
        showData: (buyType == 1 ? '买断' : '租赁') + orderMoney + '元',
      }
      postAction('/XghAuthorizationCenter/xghAuthorizationCenterOrders/add', params).then((res) => {
        if (res.code == 200) {
          this.$router.push({
            path: '/setting/buy/confirmPay',
            query: {
              id: res.result.id,
            },
          })
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  height: calc(100% - 40px);
  width: 100%;
  overflow-x: auto;
}
.content-box {
  display: flex;
  align-items: center;
  // gap: 50px;
  padding-top: 40px;
}
.content-item {
  margin: 0 25px;
  position: relative;
  width: 324px;
  height: 556px;
  background: #ffffff;
  box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(233, 233, 233, 0.1);

  .bottom {
    position: absolute;
    text-align: center;
    bottom: 19px;
    left: 0;

    .bottom-price-flex {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 11px 25px 0 25px;

      .bottom-price-flex-item {
        cursor: pointer;
        .price-border-left {
          width: 125px;
          height: 45px;
          background: linear-gradient(154deg, #ffffff 0%, #fbece0 100%);
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #f5d5bf;

          .price-border-title {
            width: 63px;
            height: 17px;
            line-height: 17px;
            background: linear-gradient(90deg, #fff3e9 0%, #f9e4d4 100%);
            border-radius: 0px 0px 10px 0px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 9px;
            color: #e28b47;
            text-align: center;
          }

          .price-border-price {
            margin-top: 7px;
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 13px;
            color: #e28b47;
          }
        }

        .buy-left {
          width: 125px;
          height: 26px;
          line-height: 26px;
          background: linear-gradient(90deg, #f6d4a8 0%, #e9a162 100%);
          text-align: center;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 11px;
          color: #ffffff;
          cursor: pointer;
        }

        .price-border-right {
          width: 125px;
          height: 45px;
          background: linear-gradient(154deg, #ffffff 0%, #ffe5e5 100%);
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #ffd2cc;

          .price-border-title {
            width: 63px;
            height: 17px;
            line-height: 17px;
            background: linear-gradient(90deg, #fff2ec 0%, #ffd8d4 100%);
            border-radius: 0px 0px 10px 0px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 9px;
            color: #f64b41;
            text-align: center;
          }

          .price-border-price {
            margin-top: 7px;
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 13px;
            color: #f64b41;
          }
        }

        .buy-right {
          width: 125px;
          height: 26px;
          line-height: 26px;
          background: linear-gradient(90deg, #ff7979 0%, #ff2525 100%);
          text-align: center;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 11px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>